<template>
  <div ref="wrapper" class="wrapper">
    <div class="content">
      <div class="hot">
        <div class="hot_title">
          热门城市
        </div>
        <ul class="hotlist">
          <li class="item" v-for="item in hotCities" :key="item.id" @click="cityName(item.name)">{{item.name}}</li>
        </ul>
      </div>
      <div class="sort">
        <div class="sort_title">
          字母排序
        </div>
        <ul class="sortlist">
          <li class="item" v-for="(item,key) in cities" @click="changeCity(key)">{{key}}</li>
        </ul>
      </div>
      <div class="cityList">
        <div v-for="(val,key) in cities" :ref="key">
          <div class="list_title">
            {{key}}
          </div>
          <ul class="list">
            <li class="item" v-for="item in val" @click="cityName(item.name)">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import {mapMutations} from 'vuex'
import BScroll from 'better-scroll'
export default {
  props: ['hotCities', 'cities'],
  data() {
    return {
      scroll: "",
    }
  },
  mounted() {
    let con = this.$refs['wrapper'];
    console.log(con);
    this.scroll = new BScroll(con);
  },
  methods: {
    changeCity(sortName) {
      this.scroll.scrollToElement(this.$refs[sortName][0]);
    },
    cityName(cityname) {
      this.changeCitys(cityname);
      this.$router.push('/');
    },
    ...mapMutations(['changeCitys']),
  }
}

</script>
<style scoped="" lang="scss">
.wrapper {
  position: absolute;
  left: 0;
  top: 0.88rem;
  bottom: 0;
  right: 0;
  background: #f5f5f5;
  overflow: hidden;

}

.hot_title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.3rem;
}

.hotlist {
  background: #fff;
  font-size: 0.28rem;
  position: relative;
  overflow: hidden;

  .item {
    width: 33.33333%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
    border-bottom: 1px solid #ddd;
    position: relative;
  }

  &:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 33.33333%;
    left: 33.33333%;
    border-left: 0.02rem solid #ddd;
    border-right: 0.02rem solid #ddd;

  }
}

.sort_title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.3rem;
}

.sortlist {
  background: #fff;
  font-size: 0.28rem;
  position: relative;
  overflow: hidden;

  .item {
    width: 16.6666%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
  }

}

.list_title {
  font-size: 0.24rem;
  color: #212121;
  padding: 0.3rem;
}

.list {
  background: #fff;
  font-size: 0.28rem;
  position: relative;
  overflow: hidden;

  .item {
    width: 25%;
    text-align: center;
    height: 0.9rem;
    line-height: 0.9rem;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 0.01rem solid #ddd;
    position: relative;
  }

  &:before {
    content: '';
    position: absolute;
    width: 25%;
    left: 25%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
  }

  &:after {
    content: '';
    position: absolute;
    width: 0;
    right: 25%;
    height: 100%;
    border-left: .02rem solid #ddd;
  }
}

</style>
